Component({
  /**
   * 组件的属性列表
   */
  properties: {
    fixed:null,
    drops: {
      type: Array,
      observer: function (newVal, oldVal) {
        if (newVal != oldVal) {
          this.init();
        }
      }
    },//导航数据数组
    borderTop: Boolean,//是否需要上边框
    customStyle: String,//自定义样式
  },

  /**
   * 组件的初始数据
   */
  data: {
    prevTabIndex: 0,//上一个点击tab的下标，用于再次点击时清除上一个样式
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init: function () {
      const that = this;
      let drops = that.data.drops;
      for (let i = 0; i < drops.length; i++) {
        if (drops[i].status) {
          // 反馈给父组件
          that.triggerEvent('toggleTab', drops[i]);
          that.setData({
            prevTabIndex: i
          })
        }
      }
    },
    /**
     * 导航切换
     */
    toggleTab: function (event) {
      const that = this;
      // 当前点击下标
      let index = event.currentTarget.dataset.index;
      // 导航数据数组
      let drops = that.data.drops;
      // 上一次记录下标
      let prevTabIndex = that.data.prevTabIndex;

      drops[prevTabIndex].status = false;
      drops[index].status = true;
      that.setData({
        prevTabIndex: index,
        drops: drops,
      })
      // 反馈给父组件
      that.triggerEvent('checkDrop', drops[index]);

    }
  },
  ready: function () {
    const that = this;
    that.init();
  },
  detached: function () {
    const that = this;
    that.setData({
      prevTabIndex: 0,
      drops: [],
    })
  }
})
